<template>
	<mx-popup v-model="is_show" @maskClose="maskClose">
		<view class="main-pop">
			<view class="main-title">
				促销优惠
				<view class="close" @click="is_show = false">
					<text class="cuIcon cuIcon-close"></text>
				</view>
			</view>
			<scroll-view class="cp-body">
				<view class="cp-content">

					<view class="cx-box" v-if="active?.id">
						<view class="cu-list menu">
							<view class="cu-item arrow">
								<view class="pm-item" >
									<view class="pm-tb">
										<view class="pm-tag">
											{{ active.type_name }}
										</view>
									</view>
									<view class="pm-t text-limit-1">
										{{ active.desc || active.name }}
									</view>
								</view>
							</view>
						</view>
					</view>


					<view class="cp-module" v-if="cp_list && cp_list.length > 0">
						<coupon-com :coupon="item" v-for="(item, index) in cp_list" :key="index" />
					</view>
				</view>
			</scroll-view>
		</view>
	</mx-popup>

</template>

<script setup>
import couponCom from '@/components/service/coupon.vue'
const { proxy } = getCurrentInstance()
const emit = defineEmits(['update:modelValue']);
const props = defineProps({
	modelValue: { required: true },
	cp_list: {
		type: Object,
		default: {}
	},
	goods: {
		type: Object,
		default: {}
	},
	active: {
		type: Object,
		default: {}
	},
})
const is_show = ref(false)

//监听数据
watch(
	() => props.modelValue,
	(value) => {
		is_show.value = value
	},
	{ immediate: true }
);

function maskClose() {
	is_show.value = false
	emit('update:modelValue', is_show.value)
}


</script>
<style lang="scss" scoped>
.cx-box {
	width: 100%;
	height: auto;
	
}
.cp-body{
	padding: 30rpx 0 0;
	.cp-module{
		padding: 30rpx;
	}
	.cu-item{
		text-align: left;

		.pm-item {
			width: 100%;
			height: auto;
			display: flex;
			align-items: center;
			margin-bottom: 20rpx;
			font-size: 24rpx;
			.pm-tb {
				width: auto;
				min-width: 100rpx;
				display: flex;
				align-items: center;
				margin-right: 10rpx;
			}

			.pm-tag {
				width: auto;
				// height: 34rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				display: inline-block;
				font-size: 20rpx;
				background: $main_color;
				border: 1px solid $main_color;
				color: #fff;
				padding: 4rpx 8rpx;
				border-radius: 4rpx;
			}

			&:first-child {
				margin-top: 10rpx;
			}
		}
	}
}
</style>